<script setup lang="ts">
import { ref,reactive,onMounted } from "vue";
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
import {Minus, Plus,CloseBold} from '@element-plus/icons-vue'
import Multiple from "@/views/common/multiplePic.vue"
// 声明 props 类型
export interface FormProps {
  formInline: {
    name:'',json:{op:'AND',node:[]}
  };
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({ name:'' })
});

const newFormInline = ref(props.formInline);
const handleClose = (tag: string) => {
  //newFormInline.value.selectOrders.splice(newFormInline.value.selectOrders.indexOf(tag), 1)
}
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}

const formRules = reactive({
  visit_time: [
    {required: true, message: '请填写回访日期', trigger: 'change'}
  ],
  picture: [
    {required: true, message: '请上传截图', trigger: 'change'}
  ],
  saleman_id: [
    {required: true, message: '业务员必填', trigger: 'change'}
  ],
  // remark: [
  //   {required: true, message: '请填写回访备注', trigger: 'change'}
  // ],
});
import {getSalesList} from "@/api/crm";
const kefuList = ref([]);
onMounted(() => {
  getSalemanList()
});
const me = ref({});
const getSalemanList = async function (page=1,limit=1000) {
  const {data} = await getSalesList({page,limit});
  kefuList.value = data?.data;
  newFormInline.value.saleman_id = data?.me?.id;
  me.value = data?.me;
}
defineExpose({ getRef });
</script>
<template>

  <el-form :model="newFormInline" label-width="120px" ref="ruleFormRef" class="pr-4" :rules="formRules">
    <el-form-item label="回访日期" prop="visit_time">
      <el-date-picker v-model="newFormInline.visit_time" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" name="visit_time" placeholder="回访日期" clearable/>
    </el-form-item>
    <el-form-item label="截图证明" prop="picture">
      <Multiple v-model="newFormInline.picture" name="file" cls="aaa" :isadd="newFormInline.status !=1" clearable :limit="3"  :disabled="newFormInline.status ==1"/>
    </el-form-item>
    <el-form-item label="客服" prop="saleman_id">
      <el-select v-model="newFormInline.saleman_id" :disabled="me.site_group==-3" placeholder="请选择客服" clearable>
        <el-option v-for="item in kefuList" :key="item.id" :label="item.username+'——'+item.nickname" :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="newFormInline.remark" name="remark" type="textarea" placeholder="回访备注" clearable/>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.center{
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}
.rowItemBox{
  background: #efefef;
  padding: 30px 10px 25px 20px;
  margin: 0 30px 20px 30px;
  border-radius: 5px;
  width: 680px;
}
.itemBox{
  position: relative;
  border: 1px dashed gray;padding:10px;margin-bottom:20px;
}
.itemBoxAction{
  position: absolute; /* 绝对定位 */
  top: -13px; /* 距离顶部 10px */
  right: -13px; /* 距离右侧 10px */
  background-color: lightblue;
}
</style>
